<script setup lang="ts">
import ChartLhz from "./ChartLhz.vue";
import {computed} from "vue";

const props = defineProps(['chart_option', 'title', 'type', 'dataZoom', 'grid'])
const {chart_option, title, type, dataZoom, grid} = props;
const options = computed(() => {
  let option = {
    // 标题
    title: {
      // 标题内容
      text: '',
      left: 'center',
      top: 10,
      textStyle: {
        // 主标题文字的颜色。
        color: '#FF6060'
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {
      top: '30px',
      textStyle: {
        color: '#ffffff',
        fontSize: 16
      }
    },
    grid: grid,
    xAxis: {
      // 坐标轴类型。 category 类目轴
      type: 'category',
      // 数据
      data: [],
      axisLabel: {
        show: true,
        color: '#ffffff',
        fontSize: 16,
        interval: 0
      },
    },
    yAxis: {
      // value 值轴
      type: 'value',
      axisLabel: {
        show: false,
        color: '#ffffff',
        fontSize: 16,
        interval: 0
      },
    },
    // 值轴数据
    series: [],
    dataZoom: dataZoom,
  };
  option.title.text = title;
  option.xAxis.data = chart_option.shift()
  let name_list = chart_option.pop();
  for (let i = 0; i < chart_option.length; i++) {
    option.series.push({
      name: name_list[i],
      type: type,
      smooth: true,
      data: chart_option[i],
    })
  }
  return option;
});
</script>

<template>
  <chart-lhz :chart_option="options" v-if="chart_option"/>
</template>

<style scoped lang="scss">

</style>